import React from 'react';
import {connect} from 'react-redux';
import {Redirect} from 'react-router-dom';
import {NavBar, InputItem, TextareaItem, Button, WhiteSpace} from 'antd-mobile';
import AvatarSelector from '../../component/avatar-selector/AvatarSelector'
import {update} from '../../redux/user.redux';

@connect(
    state => state.user,
    {update}
)
class GeniusInfo extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            title: '',
            avatar: '',
            desc: ''
        }
    }

    onChange(key, val) {
        this.setState({
            [key]: val
        });
    }

    render() {
        const {pathname} = this.props.location;
        const redirect = this.props.redirectTo;
        return (
            <div>
                {redirect && redirect !== pathname ? <Redirect to={this.props.redirectTo}/> : null}
                <NavBar mode="light">牛人完善信息页面</NavBar>
                <AvatarSelector selectAvatar={imageName => {
                    this.setState({avatar: imageName})
                }}/>
                <InputItem onChange={(v) => this.onChange('title', v)}> 求职岗位 </InputItem>
                <TextareaItem onChange={(v) => this.onChange('desc', v)} row={3} autoHeight title='个人简介'/>
                <WhiteSpace/>
                <WhiteSpace/>
                <Button
                    onClick={() => {
                        this.props.update(this.state)
                    }}
                    type='primary'>保存</Button>
            </div>
        )
    }
}

export default GeniusInfo;